<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '番茄钟设置',
  },
}
</route>
<template>
  <view class="pomodoro-settings-page">
    <!-- 自定义导航栏 -->
    <view
      class="custom-nav-bar bg-white p-4 border-b border-gray-200 flex justify-between items-center"
      :style="{ paddingTop: safeAreaInsets?.top + 'px' }"
    >
      <view class="flex items-center">
        <text class="i-fa-solid:chevron-left text-lg mr-2" @click="goBack"></text>
        <text class="text-xl font-semibold">番茄钟设置</text>
      </view>
      <view>
        <text class="text-blue-500 font-medium" @click="saveSettings">保存</text>
      </view>
    </view>

    <!-- 设置内容 -->
    <scroll-view scroll-y class="settings-container">
      <view class="settings-section">
        <view class="section-title">时间设置（分钟）</view>

        <!-- 番茄钟工作时间 -->
        <view class="setting-item">
          <text class="setting-label">工作时间</text>
          <view class="setting-value">
            <slider
              class="w-40"
              :min="1"
              :max="60"
              :value="settings.workDuration"
              :show-value="true"
              @change="onWorkDurationChange"
              color="#ff6b6b"
              activeColor="#ff6b6b"
            />
          </view>
        </view>

        <!-- 短休息时间 -->
        <view class="setting-item">
          <text class="setting-label">短休息时间</text>
          <view class="setting-value">
            <slider
              class="w-40"
              :min="1"
              :max="30"
              :value="settings.shortBreakDuration"
              :show-value="true"
              @change="onShortBreakDurationChange"
              color="#4dabf7"
              activeColor="#4dabf7"
            />
          </view>
        </view>

        <!-- 长休息时间 -->
        <view class="setting-item">
          <text class="setting-label">长休息时间</text>
          <view class="setting-value">
            <slider
              class="w-40"
              :min="5"
              :max="60"
              :value="settings.longBreakDuration"
              :show-value="true"
              @change="onLongBreakDurationChange"
              color="#20c997"
              activeColor="#20c997"
            />
          </view>
        </view>

        <!-- 完成番茄数 -->
        <view class="setting-item">
          <text class="setting-label">长休息间隔</text>
          <view class="setting-value">
            <slider
              class="w-40"
              :min="1"
              :max="10"
              :value="settings.pomodorosUntilLongBreak"
              :show-value="true"
              @change="onPomodorosUntilLongBreakChange"
              color="#fab005"
              activeColor="#fab005"
            />
            <text class="ml-2 text-gray-500">番茄钟</text>
          </view>
        </view>
      </view>

      <view class="settings-section">
        <view class="section-title">自动化设置</view>

        <!-- 自动开始下一个番茄钟 -->
        <view class="setting-item">
          <view class="setting-label-wrapper">
            <text class="setting-label">自动开始下一个番茄钟</text>
            <text class="setting-description">休息结束后自动开始下一个工作阶段</text>
          </view>
          <view class="setting-value">
            <switch
              :checked="settings.autoStartNextPomodoro"
              @change="onAutoStartNextPomodoroChange"
              color="#ff6b6b"
            />
          </view>
        </view>

        <!-- 自动开始休息 -->
        <view class="setting-item">
          <view class="setting-label-wrapper">
            <text class="setting-label">自动开始休息</text>
            <text class="setting-description">工作阶段结束后自动开始休息</text>
          </view>
          <view class="setting-value">
            <switch
              :checked="settings.autoStartBreak"
              @change="onAutoStartBreakChange"
              color="#4dabf7"
            />
          </view>
        </view>
      </view>

      <view class="settings-section">
        <view class="section-title">提醒设置</view>

        <!-- 声音提醒 -->
        <view class="setting-item">
          <view class="setting-label-wrapper">
            <text class="setting-label">声音提醒</text>
            <text class="setting-description">阶段结束时播放声音提醒</text>
          </view>
          <view class="setting-value">
            <switch
              :checked="settings.soundEnabled"
              @change="onSoundEnabledChange"
              color="#7950f2"
            />
          </view>
        </view>

        <!-- 震动提醒 -->
        <view class="setting-item">
          <view class="setting-label-wrapper">
            <text class="setting-label">震动提醒</text>
            <text class="setting-description">阶段结束时手机震动提醒</text>
          </view>
          <view class="setting-value">
            <switch
              :checked="settings.vibrationEnabled"
              @change="onVibrationEnabledChange"
              color="#7950f2"
            />
          </view>
        </view>

        <!-- 通知提醒 -->
        <view class="setting-item">
          <view class="setting-label-wrapper">
            <text class="setting-label">通知提醒</text>
            <text class="setting-description">阶段结束时发送系统通知</text>
          </view>
          <view class="setting-value">
            <switch
              :checked="settings.notificationEnabled"
              @change="onNotificationEnabledChange"
              color="#7950f2"
            />
          </view>
        </view>
      </view>

      <view class="settings-section">
        <view class="section-title">主题设置</view>

        <!-- 深色模式 -->
        <view class="setting-item">
          <text class="setting-label">深色模式</text>
          <view class="setting-value">
            <switch :checked="settings.darkMode" @change="onDarkModeChange" color="#212529" />
          </view>
        </view>

        <!-- 主题色 -->
        <view class="setting-item">
          <text class="setting-label">主题色</text>
          <view class="setting-value color-options">
            <view
              v-for="(color, index) in themeColors"
              :key="index"
              :class="['color-circle', { 'color-selected': settings.themeColor === color.value }]"
              :style="{ backgroundColor: color.hex }"
              @click="selectThemeColor(color.value)"
            ></view>
          </view>
        </view>
      </view>

      <view class="reset-button-container">
        <button class="reset-button" @click="resetSettings">恢复默认设置</button>
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
defineOptions({
  name: 'PomodoroSettingsPage',
})

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

// 主题颜色选项
const themeColors = ref([
  { value: 'red', hex: '#ff6b6b' },
  { value: 'blue', hex: '#4dabf7' },
  { value: 'green', hex: '#51cf66' },
  { value: 'yellow', hex: '#fcc419' },
  { value: 'purple', hex: '#cc5de8' },
  { value: 'orange', hex: '#ff922b' },
  { value: 'teal', hex: '#20c997' },
  { value: 'pink', hex: '#f06595' },
])

// 番茄钟设置
const settings = ref({
  workDuration: 25,
  shortBreakDuration: 5,
  longBreakDuration: 15,
  pomodorosUntilLongBreak: 4,
  autoStartNextPomodoro: true,
  autoStartBreak: true,
  soundEnabled: true,
  vibrationEnabled: true,
  notificationEnabled: true,
  darkMode: false,
  themeColor: 'red',
})

// 工作时间改变
const onWorkDurationChange = (e: any) => {
  settings.value.workDuration = e.detail.value
}

// 短休息时间改变
const onShortBreakDurationChange = (e: any) => {
  settings.value.shortBreakDuration = e.detail.value
}

// 长休息时间改变
const onLongBreakDurationChange = (e: any) => {
  settings.value.longBreakDuration = e.detail.value
}

// 长休息间隔改变
const onPomodorosUntilLongBreakChange = (e: any) => {
  settings.value.pomodorosUntilLongBreak = e.detail.value
}

// 自动开始下一个番茄钟改变
const onAutoStartNextPomodoroChange = (e: any) => {
  settings.value.autoStartNextPomodoro = e.detail.value
}

// 自动开始休息改变
const onAutoStartBreakChange = (e: any) => {
  settings.value.autoStartBreak = e.detail.value
}

// 声音提醒改变
const onSoundEnabledChange = (e: any) => {
  settings.value.soundEnabled = e.detail.value
}

// 震动提醒改变
const onVibrationEnabledChange = (e: any) => {
  settings.value.vibrationEnabled = e.detail.value
}

// 通知提醒改变
const onNotificationEnabledChange = (e: any) => {
  settings.value.notificationEnabled = e.detail.value
}

// 深色模式改变
const onDarkModeChange = (e: any) => {
  settings.value.darkMode = e.detail.value
}

// 选择主题色
const selectThemeColor = (color: string) => {
  settings.value.themeColor = color
}

// 重置设置
const resetSettings = () => {
  uni.showModal({
    title: '确认重置',
    content: '是否确定恢复默认设置？',
    success: (res) => {
      if (res.confirm) {
        settings.value = {
          workDuration: 25,
          shortBreakDuration: 5,
          longBreakDuration: 15,
          pomodorosUntilLongBreak: 4,
          autoStartNextPomodoro: true,
          autoStartBreak: true,
          soundEnabled: true,
          vibrationEnabled: true,
          notificationEnabled: true,
          darkMode: false,
          themeColor: 'red',
        }
        uni.showToast({
          title: '已恢复默认设置',
          icon: 'success',
        })
      }
    },
  })
}

// 保存设置
const saveSettings = () => {
  // 在实际应用中，这里应该保存设置到存储
  uni.setStorageSync('pomodoroSettings', settings.value)

  uni.showToast({
    title: '设置已保存',
    icon: 'success',
  })
  setTimeout(() => {
    goBack()
  }, 1500)
}

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 页面加载
onLoad(() => {
  // 从存储中加载保存的设置
  try {
    const savedSettings = uni.getStorageSync('pomodoroSettings')
    if (savedSettings) {
      settings.value = savedSettings
    }
  } catch (e) {
    console.error('加载设置失败', e)
  }
})
</script>

<style lang="scss">
.pomodoro-settings-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f2f2f7;
}

.settings-container {
  flex: 1;
  width: 100%;
}

.settings-section {
  padding: 16px;
  margin: 16px;
  background-color: white;
  border-radius: 10px;
}

.section-title {
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #e5e5ea;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-label-wrapper {
  display: flex;
  flex-direction: column;
}

.setting-label {
  font-size: 16px;
  color: #333;
}

.setting-description {
  margin-top: 4px;
  font-size: 12px;
  color: #8e8e93;
}

.color-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.color-circle {
  width: 24px;
  height: 24px;
  cursor: pointer;
  border-radius: 50%;
}

.color-selected {
  box-shadow:
    0 0 0 2px white,
    0 0 0 4px #333;
}

.reset-button-container {
  padding: 16px;
  margin-top: 16px;
  margin-bottom: 32px;
}

.reset-button {
  height: 44px;
  font-size: 16px;
  line-height: 44px;
  color: #ff3b30;
  background-color: #f2f2f7;
  border: 1px solid #d1d1d6;
  border-radius: 8px;
}
</style>
